<script lang="ts" setup>
import Articles from "./Articles.vue";
import PersonalCard from "./PersonalCard.vue";
</script>
<template>
  <div class="container">
    <n-tabs type="line" size="medium">
      <n-tab-pane name="home" tab="首页">
        <div class="layout">
          <Articles />
          <PersonalCard />
        </div>
      </n-tab-pane>
      <n-tab-pane name="vue" tab="Vue"> </n-tab-pane>
      <n-tab-pane name="flutter" tab="Flutter"> </n-tab-pane>
      <n-tab-pane name="react" tab="React"> </n-tab-pane>
    </n-tabs>
    <div class="userBox">
      <n-button type="primary" ghost>登录</n-button>
      <n-button type="info" ghost>注册</n-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.n-card.n-card--bordered {
  border: none !important;
}
.n-tabs .n-tabs-nav {
  width: 100%;
  background-color: #fff !important;
  z-index: inherit;
}

.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  .userBox {
    position: fixed;
    z-index: 10;
    top: 5px;
    right: 10%;
    .n-button:first-child {
      margin-right: 10px;
    }
  }
  .layout {
    display: flex;
  }
}
</style>
